<template>
  <view class="my-page">
    <view class="my-icon">
      <up-image
        :show-loading="true"
        shape="circle"
        :src="userInfo.pathUrl"
        width="80px"
        height="80px"
      ></up-image>
      <view class="level">
        <text>飞手等级{{ userInfo.level }}</text>
        <text>{{ userInfo.points }} 积分</text>
      </view>
    </view>
    <view class="my-content">
      <view class="my-model">
        <view v-for="(item, index) in modelList" :key="index" class="item-model" @click="navigator(item)">
          <view class="item-color" :style="{ backgroundColor: item.color }">
            <up-image
              width="30px"
              height="30px"
              class="u-page__item__slot-icon"
              :src="`../../static/assets/img/myicon${index + 1}.png`"
            ></up-image>
          </view>
          <view class="my-model-footer">
            <text>{{ item.title }}</text>
            <text>{{ item.label }}</text>
          </view>
        </view>
      </view>
      <view class="my-footer">
        <view class="footer-top">
          <text>我的资质</text>
          <text>查看详情</text>
        </view>
        <view class="footer-user">
          <view class="item-color img-user">
            <up-image
              width="30px"
              height="30px"
              class="u-page__item__slot-icon"
              :src="`../../static/assets/img/unregistered.png`"
            ></up-image>
          </view>
          <text>未注册用户</text>
        </view>
        <view class="footer-user register">
          继续注册
          <up-icon name="arrow-right" color="#ef4444" size="20"></up-icon>
        </view>
      </view>
    </view>
    <view class="exit" @click="navigator(`/pages/logon/logon`)">
      <up-image
        width="30px"
        height="30px"
        class="u-page__item__slot-icon"
        :src="`../../static/assets/img/exit.png`"
      ></up-image>
      <text>退出登录</text>
    </view>
  </view>
  <tabbar v-model:tabbarIndex="tabbarIndex"></tabbar>
</template>
<script setup lang="ts">
import tabbar from "@/components/tabbar.vue";
const tabbarIndex = ref<any>(4);
const userInfo = ref<any>({
  points: 10,
  level: "Lv.0",
  pathUrl:
    "https://img2.baidu.com/it/u=3094987369,2055473366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=626",
});
const modelList = [
  {
    id: 1,
    title: "我的订单",
    label: "查看所有订单",
    color: "#3b82f6",
    pathUrl: `/orderPages/order/myOrder`
  },
  {
    id: 2,
    title: "我的人脉",
    label: "我的好友",
    color: "#a855f7",
    pathUrl: `/socialPages/social/friend`
  },
  {
    id: 3,
    title: "我的收藏",
    label: "收藏记录",
    color: "#ef4444",
  },
  {
    id: 4,
    title: "我的设备",
    label: "管理设备",
    color: "#06b6d4",
  },
  {
    id: 5,
    title: "我的设置",
    label: "个性化设置",
    color: "#6b7280",
  },
  {
    id: 6,
    title: "联系客服",
    label: "在线客服",
    color: "#6366f1",
  },
];

const navigator = (item: any) => {
  uni.navigateTo({
    url: item.pathUrl || item,
  });
};
</script>
<style lang="scss" scoped>
.my-page {
  background-color: #f9fafb;
  height: 100vh;
  padding-bottom: 100px;
  overflow: auto;
  .my-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0;
    background-color: white;
    .level {
      margin-top: 15px;
      text {
        &:nth-child(1) {
          padding: 5px 10px;
          background-color: #fef9c3;
          color: #a3660c;
          border-radius: 20px;
        }
        &:nth-child(2) {
          margin-left: 10px;
        }
      }
    }
  }
  .my-content {
    padding: 10px 20px 20px 20px;
    .my-model {
      display: flex;
      flex-wrap: wrap;
      margin: 0 -10px;
      .item-model {
        display: flex;
        align-items: center;
        width: calc(50% - 40px);
        border-radius: 8px;
        background-color: white;
        padding: 10px;
        margin: 10px;
        .my-model-footer {
          display: flex;
          flex-direction: column;
          margin-left: 10px;
          text {
            &:nth-child(1) {
              font-size: 18px;
              font-weight: 800;
              color: #000;
            }
          }
        }
      }
    }
    .my-footer {
      padding: 15px;
      background-color: white;
      border-radius: 6px;
      .footer-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        text {
          &:nth-child(1) {
            font-size: 18px;
            font-weight: bold;
            color: #000;
          }
          &:nth-child(2) {
            color: #4080ff;
          }
        }
      }
      .footer-user {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin: 20px 0;
        &.register {
          justify-content: center;
          font-size: 16px;
          color: #ef4444;
        }
      }
    }
    .item-color {
      border-radius: 8px;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      &.img-user {
        background-color: #f3f4f6;
        border-radius: 50%;
        margin-right: 10px;
      }
      .img {
        width: 30px;
        height: 30px;
      }
    }
  }
  .exit {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ef4444;
    height: 40px;
    margin: 0 20px;
    border-radius: 6px;
    color: #ef4444;
    text {
      padding: 0 10px;
    }
    .img {
      width: 20px;
      height: 20px;
    }
  }
}
</style>
